<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      body,
      ul,
      li,
      select {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul,
      li {
        list-style: none;
      }
      .calculator {
        max-width: 300px;
        margin: 20px auto;
        border: 1px solid #eee;
        border-radius: 3px;
      }
      .cal-header {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #eee;
        text-align: center;
      }
      .cal-main {
        font-size: 14px;
      }
      .cal-main .origin-value {
        padding: 15px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .cal-main .origin-type,
      .cal-main .target-type {
        padding-left: 5px;
        width: 70px;
        font-size: 14px;
        height: 30px;
        border: 1px solid #eee;
        background-color: #fff;
        vertical-align: middle;
        margin-right: 10px;
        border-radius: 3px;
      }
      .cal-keyboard {
        overflow: hidden;
      }
      .cal-items {
        overflow: hidden;
      }
      .cal-items li {
        user-select: none;
        float: left;
        display: inline-block;
        width: 75px;
        height: 75px;
        text-align: center;
        line-height: 75px;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
        box-sizing: border-box;
      }
      li:nth-of-type(4n + 1) {
        border-left: none;
      }
      li[data-action='operator'] {
        background: #f5923e;
        color: #fff;
      }
      .buttons {
        float: left;
        width: 75px;
      }
      .buttons .btn {
        width: 75px;
        background-color: #fff;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
        height: 150px;
        line-height: 150px;
        text-align: center;
      }
      .btn-esc {
        color: #ff5a34;
      }
      .btn-backspace {
        position: relative;
      }
    </style>
  </head>

  <body>
    <div class="calculator">
      <header class="cal-header">简易计算器</header>
      <main class="cal-main">
        <div class="origin-value">0</div>
        <div class="cal-keyboard">
          <ul class="cal-items">
            <li data-action="num">7</li>
            <li data-action="num">8</li>
            <li data-action="num">9</li>
            <li data-action="operator">÷</li>
            <li data-action="num">4</li>
            <li data-action="num">5</li>
            <li data-action="num">6</li>
            <li data-action="operator">x</li>
            <li data-action="num">1</li>
            <li data-action="num">2</li>
            <li data-action="num">3</li>
            <li data-action="operator">-</li>
            <li data-action="num">0</li>
            <li data-action="operator">清空</li>
            <li data-action="operator">=</li>
            <li data-action="operator">+</li>
          </ul>
        </div>
      </main>
    </div>
    <script type="text/javascript">
      var Calculator = {
        init: function () {
          var that = this
          if (!that.isInited) {
            that.isInited = true
            // 保存操作信息
            // total: Number, 总的结果
            // next: String, 下一个和 total 进行运算的数据
            // action: String, 操作符号
            that.data = { total: 0, next: '', action: '' }
            that.bindEvent()
          }
        },
        bindEvent: function () {
          var that = this
          // 请补充代码：获取 .cal-keyboard 元素
          var keyboardEl = null
          keyboardEl = document.querySelector('.cal-keyboard')
          keyboardEl &&
            keyboardEl.addEventListener('click', function (event) {
              // 请补充代码：获取当前点击的dom元素
              var target = event.target
              // 请补充代码：获取 target的 data-action 值
              var action = target.getAttribute('data-action')
              // 请补充代码：获取target的内容
              var value = target.innerHTML
              if (action === 'num' || action === 'operator') {
                that.result(value, action === 'num')
              }
            })
        },
        result: function (action, isNum) {
          var that = this
          var data = that.data
          if (isNum) {
            data.next = data.next === '0' ? action : data.next + action
            !data.action && (data.total = 0)
          } else if (action === '清空') {
            // 请补充代码：设置清空时的对应状态
            data.total = 0
            data.next = ''
            data.action = ''
          } else if (action === '=') {
            if (data.next || data.action) {
              data.total = that.calculate(data.total, data.next, data.action)
              data.next = ''
              data.action = ''
            }
          } else if (!data.next) {
            data.action = action
          } else if (data.action) {
            data.total = that.calculate(data.total, data.next, data.action)
            data.next = ''
            data.action = action
          } else {
            data.total = +data.next || 0
            data.next = ''
            data.action = action
          }
          var valEl = null
          valEl = document.querySelector('.origin-value')
          valEl && (valEl.innerHTML = data.next || data.total || '0')
        },

        calculate: function (n1, n2, operator) {
          n1 = +n1 || 0
          n2 = +n2 || 0
          let result = 0
          if (operator === '÷') {
            // 请补充代码：获取除法的结果
            if (n2 === 0) return 0
            // return Math.floor((n1 / n2) * 100) / 100
            // return Number((n1 / n2).toFixed(2))
            result = n1 / n2
          } else if (operator === 'x') {
            // 请补充代码：获取乘法的结果
            result = n1 * n2
          } else if (operator === '+') {
            // 请补充代码：获取加法的结果
            result = n1 + n2
          } else if (operator === '-') {
            // 请补充代码：获取减法的结果
            result = n1 - n2
          }
          return Number(result.toFixed(2))
        }
      }
      // 本题展示了一个简化版的计算器，需求如下：
      // 1、除法操作时，如果被除数为0，则结果为0
      // 2、结果如果为小数，最多保留小数点后两位，如 2 / 3 = 0.67(显示0.67), 1 / 2 = 0.5(显示0.5)
      // 3、请阅读并根据提示补充完成函数 initEvent、result和calculate
      // 4、请不要手动修改html和css
      // 5、不要使用第三方插件
      Calculator.init()
    </script>
  </body>
</html>
